<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import Box from './Box.vue';
import Loading from '@/home/components/Loading.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Platform from '@/common/components/platform-avatar/index.vue';

const { $fetch } = useFetch();

const { data: listing, pending } = useAsyncData(
  'home:repository',
  () => $fetch('/warehouse/hot_warehouse', { data: { pageNo: 1, size: 5 } }),
  {
    transform: (data) => data.records ?? [],
  },
);
</script>

<template>
  <section class="page-home-repository mt-20">
    <Box :title="$t('home.home.repository.title')" :more-text="$t('home.home.repository.more') " more-link="/explore/repository">
      <ul>
        <LoadingBox :loading="pending">
          <template v-if="listing?.length > 0">
            <li v-for="item in listing" :key="item.url" class="group mt-20 border-b-1 border-hex-f7f7f7 pb-20 last:(border-b-0 pb-0)">
              <div class="flex justify-between gap-x-12">
                <div class="flex-y-center gap-x-4">
                  <a :href="item.jump" target="_blank">
                    <div class="line-clamp-1 break-anywhere text-16 color-hex-292929 font-500 leading-22 group-hover:(color-hex-345de2)">{{ item.name }}</div>
                  </a>
                  <Platform class="shrink-0" :platform="item.platform" icon-class="size-16" tooltip />
                </div>
                <div class="flex-y-center text-12px color-hex-575757 font-400">
                  <div class="i-icons:star mr-4 size-16"></div>
                  <div class="h-16">{{ formatNumber(item.starCount) }}</div>
                </div>
              </div>

              <p class="line-clamp-2 mt-6 h-44 text-14 color-hex-575757 font-400 leading-22" :title="item.description">{{ item.description }}</p>
            </li>
          </template>
          <template v-else>
            <li class="mt-20 text-center color-hex-8b8b8b">{{ $t('home.common.emptyContent') }}</li>
          </template>

          <template #loading>
            <li class="mt-20 flex-x-center">
              <Loading class="size-16 color-hex-8b8b8b" />
            </li>
          </template>
        </LoadingBox>
      </ul>
    </Box>
  </section>
</template>

<style lang="scss" scoped>
</style>
